@import './base.scss';
#app {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  user-select: none;
  .leftpanel {
    position: fixed;
    width: 1127px;
    height: 100%;
    // background: url('@/assets/images/global/left.png') no-repeat;
    // background-size: 100% 100%;
    // background-color: red;
    top: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    padding: 120px 0px 0px 57px;
    // animation: sliderLeftBack 1s linear forwards;
    // animation-fill-mode: both;
  }
  .rightpanel {
    position: fixed;
    width: 1127px;
    height: 100%;
    // background: url('@/assets/images/global/right.png') no-repeat;
    // background-size: 100% 100%;
    top: 0;
    right: 0;
    z-index: 2;
    box-sizing: border-box;
    padding: 120px 57px 0px 0px;
    // animation: sliderRight 1s linear forwards;
  }
  @keyframes sliderLeft {
    0% {
      transform: translateX(0%);
    }
    25% {
      transform: translateX(-25%);
    }
    50% {
      transform: translateX(-50%);
    }
    75% {
      transform: translateX(-75%);
    }
    100% {
      transform: translateX(-102%);
    }
  }
  @keyframes sliderLeftBack {
    0% {
      transform: translateX(-102%);
    }
    25% {
      transform: translateX(-75%);
    }
    50% {
      transform: translateX(-50%);
    }
    75% {
      transform: translateX(-25%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  @keyframes sliderRight {
    0% {
      transform: translateX(0%);
    }
    25% {
      transform: translateX(25%);
    }
    50% {
      transform: translateX(50%);
    }
    75% {
      transform: translateX(75%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes sliderRightBack {
    0% {
      transform: translateX(100%);
    }
    25% {
      transform: translateX(75%);
    }
    50% {
      transform: translateX(50%);
    }
    75% {
      transform: translateX(25%);
    }
    100% {
      transform: translateX(0%);
    }
  }
}
